import * as React from 'react';
import { Alert, ScrollView, StyleSheet, View, Dimensions, Text } from 'react-native';
import { Tester, TestSuite, TestCase } from '@rnoh/testerino';
import SwiperFlatList from 'react-native-swiper-flatlist';
import { SwiperFlatListWithGestureHandler } from 'react-native-swiper-flatlist/WithGestureHandler';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
const { width, height } = Dimensions.get('window');
const colors = ['tomato', 'thistle', 'skyblue', 'teal'];
export default () => {
    const swiperData = [
        { id: '1', title: '第一页', backgroundColor: 'tomato' },
        { id: '2', title: '第二页', backgroundColor: 'skyblue' },
        { id: '3', title: '第三页', backgroundColor: 'gold' },
        { id: '4', title: '第四页', backgroundColor: 'pink' },
    ];

    const renderSwiperItem = ({ item }) => (
        <View style={[styles.swiperItem, { backgroundColor: item.backgroundColor }]}>
            <Text style={styles.swiperText}>{item.title}</Text>
        </View>
    );

    return (
        <GestureHandlerRootView style={{ flex: 1 }}>
            <ScrollView>
                <Tester>
                    <TestSuite name="SwiperFlatList测试">
                        <ScrollView>
                            <TestCase itShould="自定义可视项配置 (SwiperFlatList minimumViewTime: 1000)">
                                <View style={styles.swiperContainer}>
                                    <SwiperFlatList
                                        data={swiperData}
                                        renderItem={renderSwiperItem}
                                        showPagination
                                        viewabilityConfig={{
                                            minimumViewTime: 1000,
                                            waitForInteraction: true,
                                        }}
                                        onViewableItemsChanged={({ viewableItems }) => {
                                            if (viewableItems.length > 0) {
                                                console.log('可视项:', viewableItems[0].index);
                                                Alert.alert(`可视项:${viewableItems[0].index}`)
                                            }
                                        }}
                                        getItemLayout={(data, index) => ({
                                            length: styles.swiperContainer.width,  // 每个项目的固定宽度
                                            offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                                            index: index,
                                        })}
                                    />

                                </View>
                            </TestCase>
                            <TestCase itShould="自定义可视项配置 (SwiperFlatList minimumViewTime: 3000)">
                                <View style={styles.swiperContainer}>
                                    <SwiperFlatList
                                        data={swiperData}
                                        renderItem={renderSwiperItem}
                                        showPagination
                                        viewabilityConfig={{
                                            minimumViewTime: 3000,
                                            waitForInteraction: true,
                                        }}
                                        onViewableItemsChanged={({ viewableItems }) => {
                                            if (viewableItems.length > 0) {
                                                console.log('可视项:', viewableItems[0].index);
                                                Alert.alert(`可视项:${viewableItems[0].index}`)
                                            }
                                        }}
                                        getItemLayout={(data, index) => ({
                                            length: styles.swiperContainer.width,  // 每个项目的固定宽度
                                            offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                                            index: index,
                                        })}
                                    />
                                </View>
                            </TestCase>

                            <TestCase itShould="自定义可视项配置 需要用户交互后才触发 waitForInteraction: true,">

                                <View style={styles.swiperContainer}>
                                    <SwiperFlatList
                                        data={swiperData}
                                        renderItem={renderSwiperItem}
                                        showPagination
                                        viewabilityConfig={{
                                            waitForInteraction: true,
                                            minimumViewTime: 1000,
                                            itemVisiblePercentThreshold: 50,
                                            viewAreaCoveragePercentThreshold: undefined,
                                        }}
                                        onViewableItemsChanged={({ viewableItems }) => {
                                            if (viewableItems.length > 0) {
                                                console.log('可视项:', viewableItems[0].index);
                                                Alert.alert(`可视项:${viewableItems[0].index}`)
                                            }
                                        }}
                                        getItemLayout={(data, index) => ({
                                            length: styles.swiperContainer.width,  // 每个项目的固定宽度
                                            offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                                            index: index,
                                        })}
                                    />
                                </View>
                            </TestCase>
                            <TestCase itShould="自定义可视项配置 立即开始检测（默认行为） waitForInteraction: false,">
                                <View style={styles.swiperContainer}>
                                    <SwiperFlatList
                                        data={swiperData}
                                        renderItem={renderSwiperItem}
                                        showPagination
                                        viewabilityConfig={{
                                            waitForInteraction: false,
                                            minimumViewTime: 1000,
                                            itemVisiblePercentThreshold: 50,
                                            viewAreaCoveragePercentThreshold: undefined,
                                        }}
                                        onViewableItemsChanged={({ viewableItems }) => {
                                            if (viewableItems.length > 0) {
                                                console.log('可视项:', viewableItems[0].index);
                                                Alert.alert(`可视项:${viewableItems[0].index}`)
                                            }
                                        }}
                                        getItemLayout={(data, index) => ({
                                            length: styles.swiperContainer.width,  // 每个项目的固定宽度
                                            offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                                            index: index,
                                        })}
                                    />
                                </View>
                            </TestCase>
                            <TestCase itShould="自定义可视项配置  需要用户交互后才触发 至少 30% 的项目内容可见 itemVisiblePercentThreshold: 30,">
                                <View style={styles.swiperContainer}>
                                    <SwiperFlatList
                                        data={swiperData}
                                        renderItem={renderSwiperItem}
                                        showPagination
                                        viewabilityConfig={{
                                            waitForInteraction: true,
                                            minimumViewTime: 1000,
                                            itemVisiblePercentThreshold: 30,
                                            viewAreaCoveragePercentThreshold: undefined,
                                        }}
                                        onViewableItemsChanged={({ viewableItems }) => {
                                            if (viewableItems.length > 0) {
                                                console.log('可视项:', viewableItems[0].index);
                                                Alert.alert(`可视项:${viewableItems[0].index}`)
                                            }
                                        }}
                                        getItemLayout={(data, index) => ({
                                            length: styles.swiperContainer.width,  // 每个项目的固定宽度
                                            offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                                            index: index,
                                        })}
                                    />
                                </View>
                            </TestCase>
                            <TestCase itShould="自定义可视项配置  需要用户交互后才触发, 至少 50% 的项目内容可见 itemVisiblePercentThreshold: 50,">
                                <View style={styles.swiperContainer}>
                                    <SwiperFlatList
                                        data={swiperData}
                                        renderItem={renderSwiperItem}
                                        showPagination
                                        viewabilityConfig={{
                                            waitForInteraction: true,
                                            minimumViewTime: 1000,
                                            itemVisiblePercentThreshold: 50,
                                            viewAreaCoveragePercentThreshold: undefined,
                                        }}
                                        onViewableItemsChanged={({ viewableItems }) => {
                                            if (viewableItems.length > 0) {
                                                console.log('可视项:', viewableItems[0].index);
                                                Alert.alert(`可视项:${viewableItems[0].index}`)
                                            }
                                        }}
                                        getItemLayout={(data, index) => ({
                                            length: styles.swiperContainer.width,  // 每个项目的固定宽度
                                            offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                                            index: index,
                                        })}
                                    />
                                </View>
                            </TestCase>
                            <TestCase itShould="自定义可视项配置  需要用户交互后才触发 至少 30% 的视图区域被覆盖 viewAreaCoveragePercentThreshold: 30,">
                                <View style={styles.swiperContainer}>
                                    <SwiperFlatList
                                        data={swiperData}
                                        renderItem={renderSwiperItem}
                                        showPagination
                                        viewabilityConfig={{
                                            waitForInteraction: true,
                                            minimumViewTime: 1000,
                                            itemVisiblePercentThreshold: undefined,
                                            viewAreaCoveragePercentThreshold: 30,
                                        }}
                                        onViewableItemsChanged={({ viewableItems }) => {
                                            if (viewableItems.length > 0) {
                                                console.log('可视项:', viewableItems[0].index);
                                                Alert.alert(`可视项:${viewableItems[0].index}`)
                                            }
                                        }}
                                        getItemLayout={(data, index) => ({
                                            length: styles.swiperContainer.width,  // 每个项目的固定宽度
                                            offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                                            index: index,
                                        })}
                                    />
                                </View>
                            </TestCase>
                            <TestCase itShould="自定义可视项配置  需要用户交互后才触发, 至少 50% 的视图区域被覆盖 viewAreaCoveragePercentThreshold: 50,">
                                <View style={styles.swiperContainer}>
                                    <SwiperFlatList
                                        data={swiperData}
                                        renderItem={renderSwiperItem}
                                        showPagination
                                        viewabilityConfig={{
                                            waitForInteraction: true,
                                            minimumViewTime: 1000,
                                            itemVisiblePercentThreshold: undefined,
                                            viewAreaCoveragePercentThreshold: 50,
                                        }}
                                        onViewableItemsChanged={({ viewableItems }) => {
                                            if (viewableItems.length > 0) {
                                                console.log('可视项:', viewableItems[0].index);
                                                Alert.alert(`可视项:${viewableItems[0].index}`)
                                            }
                                        }}
                                        getItemLayout={(data, index) => ({
                                            length: styles.swiperContainer.width,  // 每个项目的固定宽度
                                            offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                                            index: index,
                                        })}
                                    />
                                </View>
                            </TestCase>

                            <TestCase itShould="SwiperFlatListWithGestureHandler 自定义可视项配置 (minimumViewTime: 1000)">
                                <View style={styles.swiperContainer}>
                                    <SwiperFlatListWithGestureHandler
                                        data={swiperData}
                                        renderItem={renderSwiperItem}
                                        showPagination
                                        viewabilityConfig={{
                                            minimumViewTime: 1000,
                                            waitForInteraction: true,
                                        }}
                                        onViewableItemsChanged={({ viewableItems }) => {
                                            if (viewableItems.length > 0) {
                                                console.log('可视项:', viewableItems[0].index);
                                                Alert.alert(`可视项:${viewableItems[0].index}`)
                                            }
                                        }}
                                        getItemLayout={(data, index) => ({
                                            length: styles.swiperContainer.width,  // 每个项目的固定宽度
                                            offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                                            index: index,
                                        })}
                                    />

                                </View>
                            </TestCase>
                            <TestCase itShould="SwiperFlatListWithGestureHandler 自定义可视项配置 (minimumViewTime: 3000)">
                                <View style={styles.swiperContainer}>
                                    <SwiperFlatListWithGestureHandler
                                        data={swiperData}
                                        renderItem={renderSwiperItem}
                                        showPagination
                                        viewabilityConfig={{
                                            minimumViewTime: 3000,
                                            waitForInteraction: true,
                                        }}
                                        onViewableItemsChanged={({ viewableItems }) => {
                                            if (viewableItems.length > 0) {
                                                console.log('可视项:', viewableItems[0].index);
                                                Alert.alert(`可视项:${viewableItems[0].index}`)
                                            }
                                        }}
                                        getItemLayout={(data, index) => ({
                                            length: styles.swiperContainer.width,  // 每个项目的固定宽度
                                            offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                                            index: index,
                                        })}
                                    />
                                </View>
                            </TestCase>

                            <TestCase itShould="SwiperFlatListWithGestureHandler 自定义可视项配置 需要用户交互后才触发 waitForInteraction: true,">
                                <View style={styles.swiperContainer}>
                                    <SwiperFlatListWithGestureHandler
                                        data={swiperData}
                                        renderItem={renderSwiperItem}
                                        showPagination
                                        viewabilityConfig={{
                                            waitForInteraction: true,
                                            minimumViewTime: 1000,
                                            itemVisiblePercentThreshold: 50,
                                            viewAreaCoveragePercentThreshold: undefined,
                                        }}
                                        onViewableItemsChanged={({ viewableItems }) => {
                                            if (viewableItems.length > 0) {
                                                console.log('可视项:', viewableItems[0].index);
                                                Alert.alert(`可视项:${viewableItems[0].index}`)
                                            }
                                        }}
                                        getItemLayout={(data, index) => ({
                                            length: styles.swiperContainer.width,  // 每个项目的固定宽度
                                            offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                                            index: index,
                                        })}
                                    />
                                </View>
                            </TestCase>
                            <TestCase itShould="SwiperFlatListWithGestureHandler 自定义可视项配置 立即开始检测（默认行为） waitForInteraction: false,">
                                <View style={styles.swiperContainer}>
                                    <SwiperFlatListWithGestureHandler
                                        data={swiperData}
                                        renderItem={renderSwiperItem}
                                        showPagination
                                        viewabilityConfig={{
                                            waitForInteraction: false,
                                            minimumViewTime: 1000,
                                            itemVisiblePercentThreshold: 50,
                                            viewAreaCoveragePercentThreshold: undefined,
                                        }}
                                        onViewableItemsChanged={({ viewableItems }) => {
                                            if (viewableItems.length > 0) {
                                                console.log('可视项:', viewableItems[0].index);
                                                Alert.alert(`可视项:${viewableItems[0].index}`)
                                            }
                                        }}
                                        getItemLayout={(data, index) => ({
                                            length: styles.swiperContainer.width,  // 每个项目的固定宽度
                                            offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                                            index: index,
                                        })}
                                    />
                                </View>
                            </TestCase>
                            <TestCase itShould="SwiperFlatListWithGestureHandler 自定义可视项配置  需要用户交互后才触发 至少 30% 的项目内容可见 itemVisiblePercentThreshold: 30,">
                                <View style={styles.swiperContainer}>
                                    <SwiperFlatListWithGestureHandler
                                        data={swiperData}
                                        renderItem={renderSwiperItem}
                                        showPagination
                                        viewabilityConfig={{
                                            waitForInteraction: true,
                                            minimumViewTime: 1000,
                                            itemVisiblePercentThreshold: 30,
                                            viewAreaCoveragePercentThreshold: undefined,
                                        }}
                                        onViewableItemsChanged={({ viewableItems }) => {
                                            if (viewableItems.length > 0) {
                                                console.log('可视项:', viewableItems[0].index);
                                                Alert.alert(`可视项:${viewableItems[0].index}`)
                                            }
                                        }}
                                        getItemLayout={(data, index) => ({
                                            length: styles.swiperContainer.width,  // 每个项目的固定宽度
                                            offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                                            index: index,
                                        })}
                                    />
                                </View>
                            </TestCase>
                            <TestCase itShould="SwiperFlatListWithGestureHandler 自定义可视项配置  需要用户交互后才触发, 至少 50% 的项目内容可见 itemVisiblePercentThreshold: 50,">
                                <View style={styles.swiperContainer}>
                                    <SwiperFlatListWithGestureHandler
                                        data={swiperData}
                                        renderItem={renderSwiperItem}
                                        showPagination
                                        viewabilityConfig={{
                                            waitForInteraction: true,
                                            minimumViewTime: 1000,
                                            itemVisiblePercentThreshold: 50,
                                            viewAreaCoveragePercentThreshold: undefined,
                                        }}
                                        onViewableItemsChanged={({ viewableItems }) => {
                                            if (viewableItems.length > 0) {
                                                console.log('可视项:', viewableItems[0].index);
                                                Alert.alert(`可视项:${viewableItems[0].index}`)
                                            }
                                        }}
                                        getItemLayout={(data, index) => ({
                                            length: styles.swiperContainer.width,  // 每个项目的固定宽度
                                            offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                                            index: index,
                                        })}
                                    />
                                </View>
                            </TestCase>
                            <TestCase itShould="SwiperFlatListWithGestureHandler 自定义可视项配置  需要用户交互后才触发 至少 30% 的视图区域被覆盖 viewAreaCoveragePercentThreshold: 30,">
                                <View style={styles.swiperContainer}>
                                    <SwiperFlatListWithGestureHandler
                                        data={swiperData}
                                        renderItem={renderSwiperItem}
                                        showPagination
                                        viewabilityConfig={{
                                            waitForInteraction: true,
                                            minimumViewTime: 1000,
                                            itemVisiblePercentThreshold: undefined,
                                            viewAreaCoveragePercentThreshold: 30,
                                        }}
                                        onViewableItemsChanged={({ viewableItems }) => {
                                            if (viewableItems.length > 0) {
                                                console.log('可视项:', viewableItems[0].index);
                                                Alert.alert(`可视项:${viewableItems[0].index}`)
                                            }
                                        }}
                                        getItemLayout={(data, index) => ({
                                            length: styles.swiperContainer.width,  // 每个项目的固定宽度
                                            offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                                            index: index,
                                        })}
                                    />
                                </View>
                            </TestCase>
                            <TestCase itShould="SwiperFlatListWithGestureHandler 自定义可视项配置  需要用户交互后才触发, 至少 50% 的视图区域被覆盖 viewAreaCoveragePercentThreshold: 50,">
                                <View style={styles.swiperContainer}>
                                    <SwiperFlatListWithGestureHandler
                                        data={swiperData}
                                        renderItem={renderSwiperItem}
                                        showPagination
                                        viewabilityConfig={{
                                            waitForInteraction: true,
                                            minimumViewTime: 1000,
                                            itemVisiblePercentThreshold: undefined,
                                            viewAreaCoveragePercentThreshold: 50,
                                        }}
                                        onViewableItemsChanged={({ viewableItems }) => {
                                            if (viewableItems.length > 0) {
                                                console.log('可视项:', viewableItems[0].index);
                                                Alert.alert(`可视项:${viewableItems[0].index}`)
                                            }
                                        }}
                                        getItemLayout={(data, index) => ({
                                            length: styles.swiperContainer.width,  // 每个项目的固定宽度
                                            offset: styles.swiperContainer.width * index,  // 累计偏移量 = 宽度 × 索引
                                            index: index,
                                        })}
                                    />
                                </View>
                            </TestCase>
                        </ScrollView>
                    </TestSuite>
                </Tester>
            </ScrollView>
        </GestureHandlerRootView>
    );
};

const styles = StyleSheet.create({

    swiperContainer: {
        width: width * 0.7,
        height: height * 0.3,
        alignSelf: 'center',
        borderColor: '#ddd',
        borderRadius: 10,
    },
    swiperItem: {
        width: width * 0.7,
        height: height * 0.3,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 10,
    },
    swiperText: {
        fontSize: 24,
        color: 'white',
        fontWeight: 'bold',
    },
    child: {
        height: height * 0.5,
        width,
        justifyContent: 'center',
    },
    text: {
        fontSize: width * 0.1,
        textAlign: 'center',
    },
    indexText: {
        fontSize: 11,
        backgroundColor: 'transparent',
        textAlign: 'center',
        fontWeight: 'bold',
    },
});